<template>
  <div class="roleuc">
    <el-scrollbar height="400px">
      <el-row>
        <el-col :span="24">
          <el-table
            ref="roleUcTable"
            class="roleUc-table"
            row-key="fmoduleid"
            stripe
            border
            default-expand-all
            v-loading="pageData.tableParams.tableLoading"
            :tree-props="pageData.tableParams.props"
            :data="pageData.tableParams.tableData"
          >
            <el-table-column
              prop="fmodulename"
              label="模块"
              width="160"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="uclist" label="操作" min-width="200">
              <template #default="{ row }">
                <el-checkbox
                  v-for="item in row.uclist"
                  :label="item.fopername"
                  :key="item.frecordid"
                  v-model="item.ischecked"
                  @change="onHandleCheckBox($event, item)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right; margin-top: 10px">
        <el-button @click="onHandleCancel">取 消</el-button>
        <el-button
          :v-if="pageData.permissions.SetUc"
          type="primary"
          @click="onHandleSure"
          >确 定</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, nextTick, reactive, toRefs } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import utils from "@/common/utils";
// import enums from "@/common/enums";
// const lodash = require("lodash");

import { getMenuTree, getUcByRoleid, setRoleUc } from "@/api/system";

export default {
  name: "RoleUc",
  components: {},
  props: {
    modifyObj: { type: Object, required: true },
  },
  setup(props, context) {
    onMounted(() => {
      nextTick(() => {
        pageState.pageData.tableParams.tableLoading = true;
        const p1 = getMenuTree();
        const p2 = getUcByRoleid(props.modifyObj.fuserid);
        // console.log("first1", p1);
        // console.log("first2", p2);
        Promise.all([p1, p2])
          .then(([ret1, ret2]) => {
            console.log("first3", ret1);
            console.log("first4", ret2);
            pageState.pageData.tableParams.multipleSelection = ret2.map(
              (p) => {
                return { frecordid: p.frecordid, foperation: p.foperation };
              }
            );
            onHandleModule(
              ret1,
              pageState.pageData.tableParams.multipleSelection
            );
            pageState.pageData.tableParams.tableData = ret1;
            pageState.pageData.tableParams.tableLoading = false;
          })
          .catch((error) => {
            ElMessage.error(error.message || "请求出错");
            pageState.pageData.tableParams.tableLoading = false;
          });
      });
    });

    const pageState = reactive({
      pageData: {
        permissions: {
          SetUc: utils.checkPermission("sysrole_setuc"),
        },
        tableParams: {
          tableLoading: false,
          tableHeight: 0,
          // tableColumns: [],
          props: { children: "children", hasChildren: "hasChildren" },
          tableData: [],
          multipleSelection: [],
          currentRow: {},
        },
      },
    });
    const pageFunc = {
      onHandleCheckBox: (e, item) => {
        if (e) {
          pageState.pageData.tableParams.multipleSelection.push({
            frecordid: item.frecordid,
            foperation: item.foperation,
          });
        } else {
          pageState.pageData.tableParams.multipleSelection.splice(
            pageState.pageData.tableParams.multipleSelection.findIndex(
              (p) => p.frecordid === item.frecordid
            ),
            1
          );
        }
      },
      onHandleCancel: () => {
        context.emit("cancel");
      },
      onHandleSure: () => {
        const loading = ElLoading.service({
          lock: true,
          background: "rgba(0, 0, 0, 0.7)",
        });
        // 权限分配 测通
        setRoleUc({
          roleid: props.modifyObj.fuserid,
          roleuc: pageState.pageData.tableParams.multipleSelection.map(
            (p) => p.foperation
          ),
        })
          .then((res) => {
            // console.log("分配操作", res);
            loading.close();
            context.emit("ok");
          })
          .catch((error) => {
            loading.close();
            ElMessage.error(error.message || "请求出错");
          });
      },
    };
    const onHandleModule = (moduleTree, ucObjs) => {
      if (
        utils.isEmpty(moduleTree) ||
        utils.isEmpty(ucObjs) ||
        moduleTree.length < 1 ||
        ucObjs.length < 1
      ) {
        return;
      }
      moduleTree.forEach((item) => {
        onHandleUc(item.uclist, ucObjs);
        if (!utils.isEmpty(item.children) && item.children.length > 0) {
          onHandleModule(item.children, ucObjs);
        }
      });
    };
    const onHandleUc = (uclist, ucObjs) => {
      if (
        utils.isEmpty(uclist) ||
        utils.isEmpty(ucObjs) ||
        uclist.length < 1 ||
        ucObjs.length < 1
      ) {
        return;
      }
      uclist.forEach((item) => {
        item.ischecked =
          ucObjs.findIndex((p) => p.frecordid === item.frecordid) > -1;
      });
    };

    return {
      ...toRefs(pageState),
      ...pageFunc,
    };
  },
};
</script>

<style lang="scss">
.roleuc {
  height: 100%;
  background-color: white;
  .roleUc-table {
    min-height: 400px;
  }
}
</style>
